<template>
  <!-- 物流公司列表 -->
  <view class="logistics-company-list">
    <u-popup v-model="show" mode="bottom" border-radius="30">
      <!-- 弹框主要内容 -->
      <view class="main-content flex flex-dir-c">
        <!-- 标题 -->
        <view class="title">物流公司</view>
        
        <!-- 单选物流，快递 -->
        <view class="radio-type flex flex-ai-c flex-jc-sa">
          <view class="cell" @click="checkedLitsType(0)">
            <i-icon :icon="['icondanxuan', 'icontuoyuan'][litsType]" :color="['#FBB000', '#999999'][litsType]" size="28rpx"></i-icon>
            <text :class="['text', ['active',''][litsType]]">物流公司</text>
          </view>
          
          <view class="cell" @click="checkedLitsType(1)">
            <i-icon :icon="['icontuoyuan', 'icondanxuan'][litsType]" :color="['#999999', '#FBB000'][litsType]" size="28rpx"></i-icon>
            <text :class="['text', ['', 'active'][litsType]]">快递公司</text>
          </view>
        </view>
        
        <!-- 物流快递列表 -->
        <scroll-view scroll-y class="list">
          <view v-show="litsType === 0" class="list-show">
            <view v-for="(item, i) in list.logisticsArr" :key="i" class="item" @click="selectedCompany(item)">
              {{ item.name }}
            </view>            
          </view>
          
          <view v-show="litsType === 1" class="list-show">
            <view v-for="(item, i) in list.expressArr" :key="i" class="item" @click="selectedCompany(item)">
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    name: 'logisticsCompanyList',
    model: {
      prop: 'popupShow',
      event: 'edit'
    },
    
    props: {
      popupShow: {
        type: Boolean,
        default: false
      }
    },
    
    computed: {
      show: {
      	get() {
      		return this.popupShow
      	},
      	set(v) {
      		this.$emit('edit', v)
      	}
      }
    },
    
    data() {
      return {
        labels: ['物流公司', '快递公司'],
        litsType: 0,  // 单选 - 0: 物流公司， 1: 快递公司
        list: {},  // 物流、快递公司列表
      }
    },
    
    created() {
      this.getLogisticsCompanyList()
    },
    
    methods: {
      // 获取物流快递公司列表
      async getLogisticsCompanyList() {
        try {
          const res = await this.$api.jsonData.getexpresscompany()
          this.list = res.data
          console.log(res)
        } catch (err) {
          console.log(err)
        }
      },
      
      // 单选选中物流快递公司类型
      checkedLitsType(i) {
        this.litsType = i
      },
      
      // 选择了物流快递公司
      selectedCompany(data) {
        this.$emit('change', data.name)
        this.$emit('edit', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
.logistics-company-list {
  // 弹框主要内容
  .main-content {
    height: 666rpx;
    
    .list {
      height: 480rpx;
      padding-bottom: 100rpx;
      
      .list-show {
        height: 100%;
        padding-bottom: 20rpx;
      }
      
      .item {
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        
        &:hover {
          background-color: #eee;
        }
      }
    }
  }
  
  // 标题
  .title {
    height: 97rpx;
    line-height: 97rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
  }
  
  // 单选框
  .radio-type {
    height: 74rpx;
    line-height: 74rpx;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    
    .i-icon {
      margin-right: 22rpx;
    }
    
    // 文字
    .text.active {
      color: #FBB000;
    }
  }
}
</style>
